<template>
  <div class="shop">
    <el-table :data="tableData" style="width:100%;margin:40px 0;" max-height="680" :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column label="员工ID" prop="id"></el-table-column>
      <el-table-column label="员工名称" prop="nickName"></el-table-column>
      <el-table-column label="员工账号" prop="username"></el-table-column>
      <el-table-column label="员工角色" prop="roleNames"></el-table-column>
      <!-- <el-table-column label="管理小店">
        <template slot-scope="scope">
          {{ scope.row.shop_num }}家
          <span v-if="scope.row.shop_num != 0" style="cursor:pointer;color:#f4222d;"
            @click="watchTotalShop(scope.row.staff_uid)">（查看）</span>
        </template>
</el-table-column> -->
      <!-- <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" @click="watchManagentDetail(scope.row.id)">权限详情</el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <div class="pagination">
      <el-pagination background @current-change="pageChange" :current-page="page" :page-size="size"
        layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>

    <!--展示全部区域-->
    <jdialog title="员工管理的门店" :visible.sync="isShowRecharge" width="1000px">
      <div style="padding:20px">
        <el-table :data="shopData" style="width:100%;margin:40px 0;" max-height="680" :cell-style="tc"
          :header-cell-style="tccolor">
          <el-table-column label="UID" prop="id"></el-table-column>
          <el-table-column label="幕后街名称" prop="shop_name">
            <template slot-scope="scope">{{ scope.row.shop.shop_name }}</template>
          </el-table-column>
          <el-table-column label="幕后街账号" prop="mobile">
            <template slot-scope="scope">{{ scope.row.shop_user.mobile }}</template>
          </el-table-column>
          <el-table-column label="门店地址" prop="address">
            <template slot-scope="scope">{{ scope.row.shop.address }}</template>
          </el-table-column>
          <el-table-column label="缴费类型">
            <template slot-scope="scope">
              <span v-if="scope.row.shop.vip_shop_pay_type == 0">无</span>
              <span v-if="scope.row.shop.vip_shop_pay_type == 1">全额缴费</span>
              <span v-if="scope.row.shop.vip_shop_pay_type == 2">押金缴费</span>
            </template>
          </el-table-column>
          <el-table-column label="小店状态">
            <template slot-scope="scope">{{ scope.row.shop.service_time_end | model }}</template>
          </el-table-column>
        </el-table>

        <div class="paginationShop">
          <el-pagination background @current-change="pageChange" :current-page="page" :page-size="size"
            layout="total, prev, pager, next, jumper" :total="shopTotal"></el-pagination>
        </div>
      </div>
    </jdialog>
  </div>
</template>


<script>
import { adminList } from "@/api/admin.js";
export default {
  data() {
    return {
      //合伙人服务商uid
      uid: "",
      tableData: [],
      shopData: [],
      page: 1,
      size: 15,
      total: 0,
      shopTotal: 0,
      isShowRecharge: false
    };
  },
  filters: {
    model: function (val) {
      let yourtime = val.replace(/-/g, "/"); //替换字符，变成标准格式
      var d2 = new Date(); //取今天的日期
      var d1 = new Date(Date.parse(yourtime));
      //alert(d1);
      //alert(d2);
      if (d1 > d2) {
        return "入驻中";
      } else {
        return '已过期'
      }
    }
  },
  mounted() {
    this.uid = this.$route.query.uid;
    if (this.uid) {
      this.staffListSearchData();
    }
  },
  methods: {
    //查看管理小店
    async watchTotalShop(id) {
      console.log(id);
      let url = "?staff_id=" + id + "&uid=" + this.$route.query.uid;
      let res = await staffManageShop(url);
      if (res.code === 10000) {
        this.shopData = res.data.data;
        this.shopTotal = res.data.total;
      } else {
        this.$message.error(res.message);
      }
      this.isShowRecharge = true;
    },
    //权限详情
    watchManagentDetail(id) {
      console.log(id);
    },

    //获取子账号列表数据
    async staffListSearchData() {
      const url = '?uid=' + this.uid +
        '&page=' + this.page
      let query = {
        partnerId: this.$route.query.uid
      }
      let res = await adminList(query);
      if (res.code === 200) {
        this.tableData = res.data.list;
        this.total = res.data.total;
      } else {
        this.$message.error(res.message);
      }
    },
    pageChange(page) {
      this.page = page;
      this.staffListSearchData();
    },
    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    }
  }
};
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;

  .pagination {
    float: right;
    margin-top: 20px;
  }
}

.paginationShop {
  float: right;
  margin-bottom: 20px;
}
</style>
